<template>
    <div>
      <travel-header></travel-header>
      <travel-swiper :swiperList="swiperList"></travel-swiper>
      <travel-icons :iconsList="iconsList"></travel-icons>
      <travel-recommend :recommendList="recommendList"></travel-recommend>
      <travel-weekend :weekendList="weekendList"></travel-weekend>
    </div>
</template>

<script>
import TravelHeader from './components/Header'
import TravelSwiper from './components/Swiper'
import TravelIcons from './components/Icons'
import TravelRecommend from './components/Recommend'
import TravelWeekend from './components/Weekend'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    TravelHeader,
    TravelSwiper,
    TravelIcons,
    TravelRecommend,
    TravelWeekend
  },
  data () {
    return {
      swiperList: [],
      iconsList: [],
      recommendList: [],
      weekendList: [],
      lastCity: ''
    }
  },
  methods: {
    getHomeList () {
      axios.get('/api/home.json?city=' + this.$store.state.city).then((data) => {
        let res = data.data
        if (res.ret && res.data) {
          let data = res.data
          this.swiperList = data.swiperList
          this.iconsList = data.iconsList
          this.recommendList = data.recommendList
          this.weekendList = data.weekendList
        }
      })
    }
  },
  mounted () {
    this.getHomeList()
    this.lastCity = this.$store.state.city
  },
  activated () {
    if (this.lastCity !== this.$store.state.city) {
      this.lastCity = this.$store.state.city
      this.getHomeList()
    }
  }
}
</script>

<style scoped>

</style>
